<template>
  <div>
    <el-form :inline="true" ref="form" width="650">
      <el-form-item label="条件是否取反">
        <el-checkbox v-model="condition.negated" true-label="Y" false-label="N" style="padding-right: 50px"></el-checkbox>
        操作符
        <el-select v-model="condition.operator" placeholder="操作符" style="width: 100px">
          <el-option v-for="operator in options.operators" :value="operator"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="选择一个字段">
        <el-select v-model="condition.leftvalue" placeholder="选择">
          <el-option v-for="field in availableFields" :value="field.name"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="选择一个条件">
        <el-select v-model="condition.function" placeholder="选择一个条件">
          <el-option v-for="condition in options.func" :value="condition.label"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="选择一个字段">
        <el-select v-model="condition.rightvalue" placeholder="选择一个字段" @change="condition.value.text=''">
          <el-option v-for="field in availableFields" :value="field.name"></el-option>
        </el-select>
        或
        <el-button type="text" @click="dialogTableVisible=!dialogTableVisible">输入一个值</el-button>
        {{condition.value.text!=null&&condition.value.text.trim()!=""?'输入值:'+condition.value.text:""}}
      </el-form-item>
      <br>

    </el-form>
    <el-dialog title="输入一个值" size="tiny" custom-class="dialog-fit-content"  :modal-append-to-body="modalAppendToBody" v-model="dialogTableVisible" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="类型" label-width="120px">
          <el-select v-model="condition.value.type" style="width: 270px" @change="condition.value.mask=''">
            <el-option v-for="type in options.inputTypes" :value="type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="值" label-width="120px">
          <el-input v-model="condition.value.text" style="width: 270px"></el-input>
        </el-form-item>
        <!--<el-form-item label="转换格式" label-width="120px">
          <el-select v-model="condition.value.mask" style="width: 270px" placeholder="请选择格式">
            <el-option v-for="type in options.format[condition.value.type]" :value="type"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false;condition.rightvalue=''">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" src="../../../style/common.scss"></style>
<script>
  import {Fields,Options} from "../../../model/DataModel"

  export default{
    props: {
      condition: {
        type: Object,
        default: () => Fields.FilterRows()
      },
      availableFields: {
        type: Array,
        default: () => []
      }
    },
    data(){
      return {
        options:Options,
        dialogTableVisible: false,
        modalAppendToBody: false
      }
    }
  }
</script>
